<template>
  <div class="formL-agent-info-view">
    <el-form
      label-position="right"
      label-width="110px"
      :inline="true"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="营销模式:">
            <template v-if="datas.agentDetail">
              <span>{{ getLabel('agent_type', datas.agentDetail.agentType) }}</span>
              <span>[{{ getLabel(datas.agentDetail.agentType, datas.agentAttribute) }}]</span>
            </template>

            <span v-else>终端直销</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="渠道客户名称:">
            <el-link
              v-if="datas.agentDetail"
              style="display: flex;align-items: center"
              :underline="false"
              type="primary"
              @click="onClick"
            >
              {{ datas.agentDetail.agentName }}
            </el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价:">

            <el-link
              v-if="datas.agentDetail"
              style="display: flex;align-items: center"
              :underline="false"
              type="primary"
              @click="priceClick"
            >
              {{ datas.tradePrice }}元
              <span v-if="datas.productInfoDetail">/{{ getLabel('sell_unit',datas.productInfoDetail?.sellUnit) }}</span>
            </el-link>

            <div v-else>
              {{ datas.tradePrice }}元
              <span v-if="datas.productInfoDetail">/{{ getLabel('sell_unit',datas.productInfoDetail?.sellUnit) }}</span>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员:">
            <span>{{ datas.headName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="最低销量:">
            <span v-if="datas.minSale">{{ datas.minSale }}{{ getLabel('sell_unit',datas.productInfoDetail?.sellUnit) }}/{{ getLabel('sell_num_unit',datas.minSaleUnit+'') }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="销量保证金:">
            <span v-if="datas.sellEarnestMoney">{{ datas.sellEarnestMoney }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="注册日期:">
            <span>{{ dateFormat('yyyy-mm-dd',datas.createdAt) }}</span>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

  </div>

  <detail-drawer
    ref="detailDrawer"
    custom-title
    :size-width="1000"
  >
    <template #title>
      <div>
        <span>代理产品与价格 - </span>
        <span class="drawerTitle">{{ agentProduct.agentProductNumber }}</span>
      </div>

    </template>
    <template #contents>

      <item-title title="基本信息" />

      <product-and-price-detail-view
        :datas="agent"
        :agent-product="agentProduct"
        :type="agent.agentType"
        disabled
      />

      <item-title title="修改记录" />

      <operation-view
        :id="agentProduct.id"
        mode="agent_product"
      />

    </template>
  </detail-drawer>

  <detail-drawer
    ref="agentDrawer"
    custom-title
    :size-width="1000"
  >
    <template #title>
      <div>
        <span v-if="datas.agentDetail.agentType == 'agent'">代理商 - </span>
        <span v-else>兼职 - </span>
        <span class="drawerTitle">{{ datas.agentDetail.agentName }}</span>
      </div>

    </template>
    <template #contents>

      <agentInfo :id="datas.agentDetail.id" />

    </template>
  </detail-drawer>

</template>

<script>
import agentInfo from '../../../../commonView/detailComponents/agent/agentInfo'
import productAndPriceDetailView
  from '../../../../channel/signedAgent/detail/modules/productAndPrice/modules/productAndPriceDetailView'
import {defineComponent, getCurrentInstance, inject, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'AgentInfoView',
  components: { productAndPriceDetailView, agentInfo },
  props: {
    datas: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const api = inject('api')
    const currentInstance = getCurrentInstance()

    const data = reactive({
      detailDrawer: null,
      agentProduct: {},
      agent: {},
      agentDrawer: null,
    })

    const onClick = () => {
      data.agentDrawer.open()
    }

    const priceClick = () => {
      if (props.datas.agentDetail) {
        data.agent = props.datas.agentDetail
      }
      api.signedAgent
        .AGENT_PRODUCT_DETAIL(props.datas.agentProductId)
        .then((res) => {
          if (!res.code && res.data) {
            data.agentProduct = res.data.agentProduct

            data.detailDrawer.open()
          } else {
            currentInstance.proxy.customMessage({
              type: 'error',
              message: res.msg,
            })
          }
        })
    }

    return {
      ...toRefs(data),

      priceClick,
      onClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.formL-agent-info-view {
  .mainColor {
    color: $active-color;
  }
}
</style>
